<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用Claude Code开发《偏头痛日志》小程序完整指南</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 40px;
            padding: 40px 0;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .header .author {
            background: rgba(255,255,255,0.2);
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .content-card {
            background: white;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .content-card:hover {
            transform: translateY(-5px);
        }

        .section-title {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid #3498db;
            position: relative;
        }

        .section-title::before {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 50px;
            height: 3px;
            background: #e74c3c;
        }

        .step-container {
            display: grid;
            gap: 20px;
            margin-bottom: 30px;
        }

        .step {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            border-left: 4px solid #3498db;
            position: relative;
        }

        .step-number {
            position: absolute;
            top: -10px;
            left: 20px;
            background: #3498db;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9rem;
        }

        .step h3 {
            color: #2c3e50;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .step-content {
            margin-left: 10px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .info-item {
            background: #ecf0f1;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #e74c3c;
        }

        .info-item strong {
            color: #2c3e50;
            display: block;
            margin-bottom: 5px;
        }

        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            overflow-x: auto;
            margin: 15px 0;
            position: relative;
            white-space: pre-wrap;
            line-height: 1.6;
        }

        .code-block::before {
            content: '代码示例';
            position: absolute;
            top: 0;
            right: 0;
            background: #e74c3c;
            color: white;
            padding: 5px 10px;
            font-size: 0.8rem;
            border-radius: 0 8px 0 8px;
        }

        .highlight {
            background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            border-left: 4px solid #ff6b6b;
        }

        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
        }

        .warning::before {
            content: '⚠️ ';
            font-weight: bold;
        }

        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }

        .tech-tag {
            background: #3498db;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .flow-diagram {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            text-align: center;
        }

        .flow-step {
            display: inline-block;
            background: white;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: relative;
        }

        .flow-step:not(:last-child)::after {
            content: '→';
            margin-left: 10px;
            color: #3498db;
            font-weight: bold;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .feature-card {
            background: white;
            border: 2px solid #ecf0f1;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            border-color: #3498db;
            transform: translateY(-3px);
        }

        .feature-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .footer {
            text-align: center;
            color: white;
            padding: 40px 0;
            margin-top: 40px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .content-card {
                padding: 20px;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .content-card {
            animation: fadeInUp 0.6s ease forwards;
        }

        .content-card:nth-child(even) {
            animation-delay: 0.1s;
        }

        .content-card:nth-child(odd) {
            animation-delay: 0.2s;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部标题 -->
        <div class="header">
            <h1>🧠 《偏头痛日志》小程序开发指南</h1>
            <div class="subtitle">使用Claude Code打造专业的健康记录工具</div>
            <div class="author">👨‍💻 AI技术分享 | B站UP主教程</div>
        </div>

        <!-- 项目概览 -->
        <div class="content-card">
            <h2 class="section-title">📋 项目概览</h2>
            <div class="highlight">
                <strong>🎯 项目目标：</strong>开发一款帮助偏头痛患者记录发作情况的微信小程序，通过数据统计帮助用户更好地管理健康状况。
            </div>
            
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">📝</div>
                    <h3>偏头痛记录</h3>
                    <p>快速记录发作时间、疼痛程度、症状和用药情况</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <h3>数据统计</h3>
                    <p>个人仪表盘展示发作频率和趋势分析</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">⚙️</div>
                    <h3>个人设置</h3>
                    <p>用户信息管理和隐私设置</p>
                </div>
            </div>

            <div class="tech-stack">
                <span class="tech-tag">微信小程序</span>
                <span class="tech-tag">微信云开发</span>
                <span class="tech-tag">Claude Code</span>
            </div>
        </div>

        <!-- 第一步：小程序申请 -->
        <div class="content-card">
            <h2 class="section-title">🚀 第一步：小程序申请注册</h2>
            
            <div class="step-container">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>登录微信公众平台</h3>
                    <div class="step-content">
                        <p>访问 <strong>https://mp.weixin.qq.com</strong> 注册小程序账号</p>
                        <p>选择"小程序"类型，使用个人身份注册</p>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">2</div>
                    <h3>填写基本信息</h3>
                    <div class="step-content">
                        <div class="info-grid">
                            <div class="info-item">
                                <strong>小程序名称</strong>
                                偏头痛日志
                            </div>
                            <div class="info-item">
                                <strong>小程序简称</strong>
                                偏头痛记录
                            </div>
                            <div class="info-item">
                                <strong>小程序介绍</strong>
                                一款专业的个人偏头痛记录工具，帮助用户系统记录发作情况、疼痛程度、用药信息等，通过数据统计辅助用户更好地了解个人偏头痛模式，为就医提供准确的参考资料。
                            </div>
                            <div class="info-item">
                                <strong>服务类目</strong>
                                工具 > 记录
                            </div>
                        </div>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">3</div>
                    <h3>小程序头像上传</h3>
                    <div class="step-content">
                        <p>上传准备好的小程序头像文件</p>
                        <div class="info-item">
                            <strong>📱 头像要求</strong>
                            尺寸：1024x1024像素<br>
                            格式：PNG/JPG<br>
                            设计风格：简洁专业，体现记录工具属性
                        </div>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">4</div>
                    <h3>合规性注意事项</h3>
                    <div class="step-content">
                        <div class="warning">
                            <strong>重要提醒：</strong>作为个人开发者，必须避免使用任何医疗相关的描述。本小程序定位为"个人记录工具"，不提供诊断、治疗建议或医疗服务。
                        </div>
                        <ul style="margin-left: 20px; margin-top: 10px;">
                            <li>严格选择"工具 > 记录"类目</li>
                            <li>避免出现"诊断"、"治疗"、"医疗建议"等词汇</li>
                            <li>强调工具属性和数据记录功能</li>
                            <li>遵守《个人信息保护法》相关规定</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>



        <!-- 第二步：开发流程 -->
        <div class="content-card">
            <h2 class="section-title">💻 第二步：开发流程</h2>
            
            <div class="flow-diagram">
                <div class="flow-step">搭建基础架构</div>
                <div class="flow-step">初始化项目</div>
                <div class="flow-step">生成技术文档</div>
                <div class="flow-step">代码开发</div>
                <div class="flow-step">测试调试</div>
                <div class="flow-step">部署上线</div>
            </div>

            <div class="step-container">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>微信开发者工具搭建基础架构</h3>
                    <div class="step-content">
                        <p>使用微信开发者工具创建云开发小程序项目：</p>
                        <div class="info-grid">
                            <div class="info-item">
                                <strong>📱 项目创建</strong>
                                项目名称：migraine-diary<br>
                                开发模式：小程序<br>
                                后端服务：微信云开发
                            </div>
                            <div class="info-item">
                                <strong>🏗️ 基础架构</strong>
                                创建页面结构<br>
                                配置云开发环境<br>
                                初始化云数据库
                            </div>
                        </div>
                        <div class="warning">
                            <strong>重要：</strong>确保开启云开发功能，这是后续使用Claude Code开发的基础。
                        </div>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">2</div>
                    <h3>使用/init命令初始化</h3>
                    <div class="step-content">
                        <p>在Claude Code中执行初始化命令：</p>
                        <div class="code-block">
/init
                        </div>
                        <p>此命令将生成项目的CLAUDE.md文件，建立项目上下文和内存管理</p>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">3</div>
                    <h3>生成技术文档</h3>
                    <div class="step-content">
                        <p>使用以下完整提示词让Claude Code生成技术文档：</p>
                        <div class="code-block">
@小程序偏头痛记录需求文档.md 是小程序的需求文档，现在需要你根据需求文档完成开发技术文档

- 如果使用到图片或者icon的话，请使用开源资源，不要引用不存在的本地资源

- 需要注意需求文档中一些关于偏头痛的专业信息和需求中的专业内容

- 技术文档要求严格遵守需求文档，不要扩展不需要的需求，最终只需要实现偏头痛记录、个人仪表盘和趋势、我的设置三块即可，我的页面中只需要基本基本功能即可，不需要出现其他的功能

- 完成技术文档之后，需要将需求文档和技术文档动态添加到CLAUDE.md文件中，让Claude Code获取到开发内容
                        </div>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">4</div>
                    <h3>开始开发项目</h3>
                    <div class="step-content">
                        <p>根据生成的技术文档，使用Claude Code进行项目开发：</p>
                        <div class="code-block">
根据技术文档，请帮我开始开发《偏头痛日志》小程序项目：

1. 创建完整的项目结构，包括页面、组件、云函数等

2. 实现三个核心模块：
   - 偏头痛记录页面（疼痛评估、症状选择、诱因记录、用药记录）
   - 个人仪表盘和趋势统计页面（发作频率、疼痛趋势图表）
   - 我的设置页面（基础个人信息管理）

3. 配置微信云开发环境（云数据库、云函数、安全规则）

4. 采用静默技术设计理念，确保用户体验简洁友好

请严格按照需求文档执行，不要添加额外功能
                        </div>
                        <div class="highlight">
                            <strong>🎯 开发重点：</strong>Claude Code会根据技术文档自动生成完整的小程序代码，包括前端页面、后端云函数、数据库设计等，大大提升开发效率。
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三步：测试和上线 -->
        <div class="content-card">
            <h2 class="section-title">🚀 第三步：测试和上线</h2>
            
            <div class="step-container">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>功能测试与调试</h3>
                    <div class="step-content">
                        <p>完成开发后，进行全面的功能测试：</p>
                        <ul style="margin-left: 20px; margin-top: 10px;">
                            <li>📝 记录功能测试：验证各项数据能正确保存和显示</li>
                            <li>📊 统计功能测试：确认图表和趋势分析显示正确</li>
                            <li>🔄 离线同步测试：验证网络断开时的数据处理</li>
                            <li>📱 多设备适配测试：检查不同屏幕尺寸的显示效果</li>
                        </ul>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">2</div>
                    <h3>提交审核</h3>
                    <div class="step-content">
                        <div class="warning">
                            <strong>合规要求：</strong>确保隐私政策完整，避免医疗相关描述，强调工具记录属性
                        </div>
                        <div class="info-grid" style="margin-top: 15px;">
                            <div class="info-item">
                                <strong>📋 审核材料</strong>
                                功能截图<br>
                                隐私政策<br>
                                用户协议<br>
                                功能说明
                            </div>
                            <div class="info-item">
                                <strong>⚠️ 注意事项</strong>
                                工具属性定位<br>
                                合规性检查<br>
                                功能完整性<br>
                                用户体验
                            </div>
                        </div>
                    </div>
                </div>

                <div class="step">
                    <div class="step-number">3</div>
                    <h3>发布上线</h3>
                    <div class="step-content">
                        <div class="highlight">
                            <strong>🎉 项目完成！</strong>通过Claude Code的AI辅助，我们高效地完成了一款专业的偏头痛记录小程序，为用户提供实用的健康管理工具。
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="footer">
            <p>🎬 感谢观看本期AI开发教程</p>
            <p>👍 如果觉得有用请点赞关注，我们下期再见！</p>
            <p style="margin-top: 20px; opacity: 0.8; font-size: 0.9rem;">
                ⚡ Powered by Claude Code | 🎓 Educational Content Only
            </p>
        </div>
    </div>
</body>
</html> 